<template>
  <div>
    <page-header title="权限验证" />
    <page-main>
      <div v-if="!$store.state.settings.openPermission">请到 seeting.js 里打开权限功能，再进入该页面查看演示</div>
      <div v-else>
        <h3>切换帐号</h3>
        <el-radio-group v-model="account" @change="accountChange">
          <el-radio-button label="admin" />
          <el-radio-button label="test" />
        </el-radio-group>
        <h3>帐号权限</h3>
        <div>{{ $store.state.settings.permissions }}</div>
        <h3>鉴权组件（请对照代码查看）</h3>
        <div>
          <auth value="permission.browse" style="margin-bottom: 10px;">
            <el-tag>你有 permission.browse 权限</el-tag>
            <template slot="no-auth">
              <el-tag type="danger">你没有 permission.browse 权限</el-tag>
            </template>
          </auth>
          <auth value="permission.create" style="margin-bottom: 10px;">
            <el-tag>你有 permission.create 权限</el-tag>
            <template slot="no-auth">
              <el-tag type="danger">你没有 permission.create 权限</el-tag>
            </template>
          </auth>
          <auth :value="['permission.browse', 'permission.create']" style="margin-bottom: 10px;">
            <el-tag>你有 permission.browse 或 permission.create 权限</el-tag>
            <template slot="no-auth">
              <el-tag type="danger">你没有 permission.browse 或 permission.create 权限</el-tag>
            </template>
          </auth>
          <auth-all :value="['permission.browse', 'permission.create']">
            <el-tag>你有 permission.browse 和 permission.create 权限</el-tag>
            <template slot="no-auth">
              <el-tag type="danger">你没有 permission.browse 和 permission.create 权限</el-tag>
            </template>
          </auth-all>
        </div>
        <h3>鉴权指令（请对照代码查看）</h3>
        <div>
          <div v-auth="'permission.browse'">
            如果你有 permission.browse 权限则能看到这句话
          </div>
          <div v-auth="'permission.create'">
            如果你有 permission.create 权限则能看到这句话
          </div>
          <div v-auth="['permission.browse', 'permission.create']">
            如果你有 permission.browse 或 permission.create 权限则能看到这句话
          </div>
          <div v-auth-all="['permission.browse', 'permission.create']">
            如果你有 permission.browse 和 permission.create 权限则能看到这句话
          </div>
        </div>
        <h3>鉴权函数（请对照代码查看）</h3>
        <div>
          <el-button-group style="display: block; margin-bottom: 10px;">
            <el-button @click="permissionCheck('permission.browse')">校验 permission.browse 权限</el-button>
            <el-button @click="permissionCheck('permission.create')">校验 permission.create 权限</el-button>
          </el-button-group>
          <el-button-group>
            <el-button @click="permissionCheck(['permission.browse', 'permission.create'])">校验 permission.browse 或 permission.create 权限</el-button>
            <el-button @click="permissionCheck2(['permission.browse', 'permission.create'])">校验 permission.browse 和 permission.create 权限</el-button>
          </el-button-group>
        </div>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: this.$store.state.user.account
    }
  },
  methods: {
    accountChange(val) {
      this.$store.dispatch('user/login', {
        account: val,
        password: ''
      }).then(() => {
        location.reload()
      })
    },
    permissionCheck(permissions) {
      if (this.$auth(permissions)) {
        this.$message.success('校验通过')
      } else {
        this.$message.error('校验不通过')
      }
    },
    permissionCheck2(permissions) {
      if (this.$authAll(permissions)) {
        this.$message.success('校验通过')
      } else {
        this.$message.error('校验不通过')
      }
    }
  }
}
</script>
